<template>
	<view class="pageHelper" :style="{ top: top + 'px' }" @touchstart="touchStartHandler" @touchend="touchendHandler">
		<!-- 下拉刷新加载动画 -->
		<view class="refreshCon" :style="{ top: refreshIconTop + 'px' }">
			<view class="refreshIcon"></view>
			<view class="refreshTips">{{ refreshTipText }}</view>
		</view>
		<!-- 数据插槽 -->
		<slot></slot>
		<!-- 上拉加载加载提示 -->
		<view class="loadingArea">
			<view class="loadingIcon" v-show="loadingIcon"></view>
			<view class="loadingText">{{ loadingText }}</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'pageHelper',
	props: {
		top: {
			type: Number,
			default() {
				return 0; //列表容器距离顶部的初始距离
			}
		}
	},
	data() {
		return {
			dataArray: [], //响应数据数组
			startClientX: null, //手指触摸动作开始ClientX
			startClientY: null, //手指触摸动作结束ClientY
			containerToTop: null, //列表容器距离顶部实时距离
			loadingText: '加载中', //操作文字提示
			loadingIcon: true, //显示加载状态框
			refreshIconTop: -40, //下拉刷新加载图标初始顶部距离
			refreshTipText: '加载中' //刷新动画提示文字
		};
	},
	mounted() {
		//组件初始化数据请求
		this.getList();
	},
	methods: {
		getList() {
			this.$emit('init', 0);
		},
		// 手指触摸动作开始
		touchStartHandler(e) {
			this.startClientX = e.changedTouches[0].clientX;
			this.startClientY = e.changedTouches[0].clientY;
		},
		// touchendHandler 手指触摸动作结束
		async touchendHandler(e) {
			let that = this;
			if (Math.abs(e.changedTouches[0].clientX - this.startClientX) < 20 && Math.abs(e.changedTouches[0].clientY - this.startClientY) > 50) {
				const query = uni.createSelectorQuery().in(that);
				await query
					.select('.pageHelper')
					.boundingClientRect(data => {
						that.containerToTop = data.top; // 容器距离顶部距离
					})
					.exec();
				if (e.changedTouches[0].clientY - this.startClientY > 0 && that.containerToTop == that.top) {
					this.refreshIconTop = 40;//刷新图标距离顶部定位
					this.$emit('refresh'); //下拉刷时部分数据需初始化
					this.getList(); // 请求获取数据列表
				} else if (e.changedTouches[0].clientY - this.startClientY < 0) {
					// 如有需求可在此处执行上拉操作，此处的上拉操作并非页面触底，而是每次上拉指定距离后都会触发
					// console.log('上拉操作');
				}
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.pageHelper {
	overflow: hidden;
	width: 100%;
	border: 1px solid #ff3333;
	position: absolute;
	padding-bottom: 20rpx;
	box-sizing: border-box;
	.loadingArea {
		display: flex;
		justify-content: center;
		align-items: center;
		.loadingIcon {
			width: 30rpx;
			height: 30rpx;
			background: transparent;
			border-radius: 50%;
			border: 2rpx solid #555;
			border-top-color: transparent;
			border-right-color: transparent;
			animation: loading 1s linear infinite;
			margin-right: 20rpx;
			box-sizing: border-box;
			@keyframes loading {
				0% {
					transform: rotateZ(0deg);
				}
				100% {
					transform: rotateZ(360deg);
				}
			}
		}
		.loadingText {
			color: rgba(85, 85, 85, 0.8);
		}
	}
	.refreshCon {
		position: absolute;
		left: calc(50% - 15rpx);
		z-index: 2;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		transition: all 300ms;
		.refreshIcon {
			width: 35rpx;
			height: 35rpx;
			border-radius: 50%;
			border: 4rpx solid rgba(72, 150, 43, 1);
			border-top-color: rgba(0, 0, 0, 0);
			animation: refreshLoading 1s linear infinite forwards;
		}
		@keyframes refreshLoading {
			0% {
				transform: rotate(0);
			}
			100% {
				transform: rotate(360deg);
			}
		}
		.refreshTips {
			color: rgba(0, 0, 0, .6);
			font-size: 24rpx;
		}
	}
}
</style>
